<template>
    <div>
        <h1>vue3 语法</h1>
        <h2>{{ msg }}</h2>
        <h2>{{ num }}</h2>
        <input type="text" v-model="num">
        <button @click="add">点击 加1</button>
        <h2>{{ obj.name }}</h2>
        <input type="text" v-model="obj.name">
        <button @click="showObj">显示obj</button>

        <h2>{{ arr }}</h2>
        <!-- 数组的遍历：证明在vue3中 vue2的很多语法可以使用 -->
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                {{ item }}
            </li>
        </ul>
        <hr>
        <h1>data中的数据</h1>
        <h2>{{info1}}</h2>
    </div>
</template>

<script lang="ts">
//defineComponent  用来创建组件对象
//ref 用来实现 基本数据类型数据的  响应式
//reactive 用来实现 引用数据类型的 响应式
import { defineComponent, ref, reactive } from 'vue'

export default defineComponent({
    //vue3中的配置项都写在setUp中
    setup() {
        //不能使用 this  ,this返回值是undefined
        //1、当中的this不是组件对象，不能使用this.data当中的属性，不能计算访问计算属性、监听器、methods
        //2、所有在模板（template）中使用的数据，都需要在setup函数的return返回值的对象当中返回

        //单独设置数据，vue3中无法实现数据响应式
        //在这里 声明变量 及 设置初始值
        //基本数据类型实现响应式 通过ref
        let msg = ref('目前看来没有想象中那么糟糕！')
        let num = ref(0);
        //写事件
        function add() {
            console.log(num)
            console.log(num.value)
            num.value += 1
        }
        //引用数据类型 实现响应式 用 reactive
        let obj = reactive({
            name: 'tom',
            age: 18
        })
        function showObj() {
            console.log(obj)
            
        }
        //设置数组
        let arr = reactive([1, 2, 3])
        //创建函数  事件执行函数 
        // function changeArr(){
        //     console.log()
        // }
        return {
            msg,
            num,
            add,
            obj,
            showObj,
            arr
        }
    },
    //在vue3中我们知道data也是可以识别的，
    //1、混合使用，能不能用；  证明可以混合使用
    //2、混合使用时，当setup中与data中有一个同名的初始数据时，听谁的  事实证明 有的版本脚手架会报错，重复命名了；有的版本脚手架不会报错，听setup的
    data(){
        return{
            info1:'测试能否混合setup和data能否混合使用',
            // msg:'混合使用，看看听谁的'
        }
    }
})
/*
    在vue3中使 数据 成为 响应式数据
        1、基本数据类型：
        //ref 用来实现 基本数据类型数据的  响应式(只针对基本数据类型的数据)
        //被ref包裹的数据 都会成为ref对象，数据值可以通过 xx.value 获得  
        //ref 实现双向数据绑定的原理是通过 getter和setter
        //在ref对象当中，ts或者说是js当中操作数据获取具体的值，是通过xx.value获取。  而在模板template中获取，不需要xx.value，直接使用即可
        2、引用数据类型
            //使用ref()包裹 引用数据类型之后，数据变成了ref对象，是响应式的数据，但是value值不是该对象，是一个proxy代理对象
        //reactive
        //使用ref或者reactive都要先引入
        //使用reactive将对象变为响应式对象，直接他就是proxy对象，他就是个响应式数据
*/

</script>

<style scoped>

</style>